<template>
  <div class="home-content">
    <!-- 统计总览 图标有5种颜色 icon-warning icon-primary icon-success icon-danger icon-purple -->
    <el-row>
      <el-col :span="6">
        <div class="card-box card-stats">
          <span class="icon-box icon-warning">
            <i class="el-icon-document"></i>
          </span>
          <div class="fr t-r">
            <p>name</p>
            <p class="fs20">123.123</p>
          </div>
          <hr />
          <div class="fs12"><i class="el-icon-collection-tag"></i> 说明</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-box card-stats">
          <span class="icon-box icon-primary">
            <i class="el-icon-s-marketing"></i>
          </span>
          <div class="fr t-r">
            <p>name</p>
            <p class="fs20">123.123</p>
          </div>
          <hr />
          <div class="fs12"><i class="el-icon-collection-tag"></i> 说明</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-box card-stats">
          <span class="icon-box icon-danger">
            <i class="el-icon-money"></i>
          </span>
          <div class="fr t-r">
            <p>name</p>
            <p class="fs20">123.123</p>
          </div>
          <hr />
          <div class="fs12"><i class="el-icon-collection-tag"></i> 说明</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-box card-stats">
          <span class="icon-box icon-purple">
            <i class="el-icon-money"></i>
          </span>
          <div class="fr t-r">
            <p>name</p>
            <p class="fs20">123.123</p>
          </div>
          <hr />
          <div class="fs12"><i class="el-icon-collection-tag"></i> 说明</div>
        </div>
      </el-col>
    </el-row>

    <!-- 统计图表 -->
    <el-row>
      <el-col :span="8">
        <div class="card-box">
          <div class="card-title">折线图</div>
          <div class="height300">
            <ELine :chartsData="lineData" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card-box">
          <div class="card-title">柱状图</div>
          <div class="height300">
            <EBar :chartsData="lineData" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card-box">
          <div class="card-title">折线图</div>
          <div class="height300">
            <ELine :chartsData="lineData" />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 表格列表 -->
    <el-row>
      <el-col :span="8">
        <div class="card-box card-list">
          <div class="card-title">列表</div>
          <el-scrollbar>
            <ul>
              <li>
                <div>name</div>
                <div class="fs12">2021-12-12 12:12:12</div>
              </li>
              <li>
                <div>name</div>
                <div class="fs12">2021-12-12 12:12:12</div>
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="card-box card-table">
          <div class="card-title">表格</div>
          <el-table :data="list" height="400">
            <el-table-column sortable prop="xxx" label="名字"></el-table-column>
            <el-table-column sortable prop="xxx" label="name"></el-table-column>
            <el-table-column sortable prop="xxx" label="其他"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ELine from '@/components/echarts/e-line'
import EBar from '@/components/echarts/e-bar'
// import { login } from '@/api/public';

export default {
  components: { ELine, EBar },
  data() {
    return {
      lineData: {},
      list: [{ xxx: 'Bell' }, {}, {}]
    }
  },
  mounted() {
    this.lineData = {
      category: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      data: [[20, 32, 1, 34, 290, 330, 320], [82, 93, 90, 93, 129, 133, 132]]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--theme-header-background);
}
.fs12 {
  font-size: 12px;
}
.fs20 {
  font-size: 20px;
}
.height300 {
  height: 300px;
}
.home-content {
  min-height: calc(100vh - var(--size-head-height));
  padding: 20px 0 0 20px;
  font-size: 14px;
  color: var(--theme-header-color);
  background: var(--theme-header-background);
}
.card-box {
  margin: 0 20px 20px 0;
  padding: 20px;
  background: var(--theme-sidebar-background);
  border-radius: 4px;
  box-shadow: 0 1px 20px 0 rgb(0 0 0 / 10%);
}
.card-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.card-stats {
  .icon-box {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
  }
  .icon-warning {
    background: #ff8d72;
    background-image: linear-gradient(to bottom left,#ff8d72,#ff6491,#ff8d72);
    background-size: 210% 210%;
    background-position: 100% 0;
  }
  .icon-primary {
    background: #1d8cf8;
    background-image: linear-gradient(to bottom left,#1d8cf8,#3358f4,#1d8cf8);
    background-size: 210% 210%;
    background-position: 100% 0;
  }
  .icon-success {
    background: #67c23a;
    background-image: linear-gradient(to bottom left,#67c23a,#39ad88,#67c23a);
    background-size: 210% 210%;
    background-position: 100% 0;
  }
  .icon-danger {
    background: #fd5d93;
    background-image: linear-gradient(to bottom left,#fd5d93,#ec250d,#fd5d93);
    background-size: 210% 210%;
    background-position: 100% 0;
  }
  .icon-purple {
    background: #e14eca;
    background-image: linear-gradient(to bottom left,#e14eca,#ba54f5,#e14eca);
    background-size: 210% 210%;
    background-position: 100% 0;
  }
}
.card-list {
  .el-scrollbar {
    height: 400px;
  }
  ul{
    font-size: 14px;
    li{
      padding: 10px;
      border-bottom: 1px solid #3d3f51;
    }
  }
}
.card-table {
  /deep/.el-table {
    color: var(--theme-header-color);
    border: none;
    background-color:  transparent;
    &::before {
      display: none;
    }
    th {
      font-size: 14px;
    }
    th, tr {
      background-color:  transparent;
    }
    td, th.is-leaf {
      border-color: #3d3f51;
    }
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: transparent;
  }
}
</style>
